<!-- 预约详情 -->
<template>
	<view class="appointmentInfoContainer">
		<view class="appointmentInfoHead flex" @click="jumpInfoPage()">
			<image :src="appopintmentInfo.laboratoryPic" v-if="appopintmentInfo.laboratoryPic" class="classRoomImg"></image>
			<image src="../../static/images/classroomPic.png" v-else class="classRoomImg"></image>
			<view class="appointmentInfoHeadBox">
				<view class="appointmentInfoHead-title txtOverFlow">
					{{appopintmentInfo.laboratoryName}}
					<text v-if="appopintmentInfo.shareOrderCount < appopintmentInfo.minPersonCount">（空闲中）</text>
					<text v-else-if="appopintmentInfo.shareOrderState == 10 ">（待开放）</text>
					<text v-else-if="appopintmentInfo.shareOrderState == 20">（使用中）</text>
				</view>
				<view class="appointmentInfoHead-subTxt flex">
					<text>位置：</text>
					<text class="ftc6">{{appopintmentInfo.laboratoryName}}</text>
				</view>
				<view class="appointmentInfoHead-subTxt flex">
					<text style="display: flex;flex-wrap: nowrap;">简介：</text>
				</view>
				<view class="appointmentInfoHead-subTxt flex" style="margin-bottom:15rpx">
					<text>{{appopintmentInfo.laboratoryExplain}}</text>
				</view>
			</view>
			<image src="../../static/images/moreIconHui.png" class="moreIconHui"></image>
		</view>
		<view class="appointmentInfoBox2">
			<view class="appointmentInfoItem flex">
				<view class="appointmentInfoLabel">预约日期</view>
				<view class="appointmentInfoTxt">{{appopintmentInfo.appointmentDate}}({{week}})</view>
			</view>
			<block v-if="appopintmentInfo.isShare == 0 && appopintmentInfo.isPositionAppointment != 1 && appopintmentInfo.orderDetailList&&appopintmentInfo.orderDetailList.length > 0">
				<view class="timeListItem" v-for="item,index in appopintmentInfo.orderDetailList" :key='index'>
					{{item.startTime}}-{{item.endTime}}
				</view>
			</block>
			<block v-if="appopintmentInfo.isShare == 0 && appopintmentInfo.isPositionAppointment == 1 && appopintmentInfo.orderDetailList&&appopintmentInfo.orderDetailList.length > 0">
				<view class="stationItem" v-for="item,index in appopintmentInfo.orderDetailList" :key='index'>
					<view>{{item.startTime}}-{{item.endTime}}</view>
					<view>{{item.siteName}}</view>
				</view>
			</block>
			
			<!-- <view class="appointmentInfoItem flex">
				<view class="appointmentInfoLabel">使用教室</view>
				<view class="appointmentInfoBtn" v-if="appopintmentInfo.orderState == 70" style="margin-left: 40%;background: #bcbcbc">扫码开门</view>
				<view class="appointmentInfoBtn" v-else @click="scanOpenDoor()" style="margin-left: 40%;">扫码开门</view>
			</view> -->
		<!-- 	<view class="appointmentInfoItem flex">
				<view class="appointmentInfoLabel">签到情况：{{appopintmentInfo.totalSignedCount}}/{{appopintmentInfo.visitedUserCount}}</view> 
			</view> -->
		<!-- 	<view class="appointmentInfoItem flex">
				<view class="appointmentInfoLabel">签退情况：{{appopintmentInfo.totalOutCount}}/{{appopintmentInfo.totalSignedCount}}</view> 
			</view> -->
 	
	
			
		</view>
		
		
		<view   style="text-align: center;color:red;margin-top:30px;" v-if="appopintmentInfo.orderState == 0 && appopintmentInfo.isClassroomAppointment ==1 ">待审核,审核通过后可生成邀请码</view>
		
		<!--下面是邀请二维码的内容-->
			<!-- <canvas canvas-id='shareCanvas' style='width:375px;height:580px'></canvas> -->
			<view class="invitationBox" style="text-align: center;" v-if="appopintmentInfo.orderState==10">
				<!--  #ifdef  MP-WEIXIN -->
				<image :src="shareCode" class="scanImg"></image>
				<!--  #endif -->
				
				<!--  #ifdef  H5 -->
				<view class="scanImgBox" style="margin-top: 200px;">
					<tki-qrcode 
					ref="qrCodeInv" 
					:val="valInv" 
					:size="size" 
					:unit="unit" 
					:iconSize="iconsize" 
					 :lv="lv" 
					 :onval="onval" 
					 :loadMake="loadMake"
					 :showLoading="showLoading" 
					 :loadingText="loadingText" />
				</view>
				<!--  #endif -->
				
				<!-- <view class="subTit" style="font-size: 34rpx;font-weight: bold;color: #333;">邀请您一起预约</view> -->
				<view class="subTit">{{appopintmentInfo.laboratoryName}}邀请码</view>
				<view class="subTit" style="color: #222;font-size: 26rpx;margin-top: -4rpx;">
					{{appopintmentInfo.appointmentDate}} 
					<block v-if="appopintmentInfo.isClassroomAppointment == 1"> 
						<text style="margin-left: 10rpx;">{{appopintmentInfo.startTime}} - {{appopintmentInfo.endTime}}</text>
					</block>
				</view>
				<!--  #ifdef  MP-WEIXIN -->
					<view class="saveBtn" @click="saveImg()">保存图片</view>
				<!--  #endif -->
				
					<!-- <view class="saveBtn" @click="wxShareHandler()">分享好友</view> -->
			</view>
			<canvas :style="{height: '100%',width: '100%',backgroundColor: '#FFFFFF'}" canvas-id="shareCanvas"></canvas>
		 
		
		
		
		
		
		
		
		
		
		
		
		
		<!--下面是开门二维码的内容-->
<!-- 		<view class="qrImg" v-show="showScanCode">
			<tki-qrcode 
			ref="qrcode" 
			:val="val" 
			:size="size" 
			:unit="unit" 
			:iconSize="iconsize" 
			 :lv="lv" 
			 :onval="onval" 
			 :loadMake="loadMake"
			 :showLoading="showLoading" 
			 :loadingText="loadingText" />
			<view class="appointmentInfoSubTxt" @click="scanOpenDoor()">刷新二维码</view>
		</view> -->
		
		
		
		<!-- 被邀请的不允许邀请其他人 -->
		<block v-if="appopintmentInfo.isVisited != 1">
			<!-- 是否位置预约：0：否 1：是 -->
			<view class="appointmentInfoItem flex" v-if="appopintmentInfo.isPositionAppointment != 1 && appopintmentInfo.orderState<=20 ">
			<!-- 	<view class="appointmentInfoLabel2">邀请学员</view> -->
				<!-- 共享空间展示文字 -->
				<view class="tipsTxtBox" v-if="appopintmentInfo.isShare == 1">
					<view class="tipsTxt" v-if="appopintmentInfo.shareOrderCount < appopintmentInfo.minPersonCount">
						还需要邀请
						<text v-if="appopintmentInfo.minPersonCount-appopintmentInfo.shareOrderCount < 0">0</text>
						<text v-else>{{appopintmentInfo.minPersonCount-appopintmentInfo.shareOrderCount}}</text>
						人才可开放使用！
					</view>
					<view class="tipsTxt" v-else-if="appopintmentInfo.shareOrderCount >= appopintmentInfo.maxPersonCount">
						已达使用上限，无法邀请！
					</view>
					<view class="tipsTxt" v-else>
						已满足要求，还可邀请{{appopintmentInfo.maxPersonCount-appopintmentInfo.shareOrderCount}}人。
					</view>
				</view>
				<!-- 不是共享空间并且是整间预约 -->
				<view class="tipsTxtBox" v-if="appopintmentInfo.isShare == 0 && appopintmentInfo.appointmentWay == 1">
					<view class="tipsTxt" style="font-size:15px;">
											当前加入人员名单：
											<span>{{appopintmentInfo.userName}}</span>
											<span v-for="(userItem,uIndex) in appopintmentInfo.visiteUsersList" style="margin-left:5px;">
												{{userItem.userName}}
											</span>
											</view>
					
					<view class="tipsTxt" v-if="appopintmentInfo.visitedUserCount < appopintmentInfo.minPersonCount" style="font-size:15px;">
						备注：该教室室仅供{{appopintmentInfo.minPersonCount}}—{{appopintmentInfo.maxPersonCount}}人的团队使用，请分享该二维码，邀请团队成员尽快加入。
<!-- 						最低{{appopintmentInfo.minPersonCount}}人使用,已邀请{{appopintmentInfo.visitedUserCount-1}}人, 还需邀请{{appopintmentInfo.minPersonCount-appopintmentInfo.visitedUserCount}}人才可使用！ -->
					</view>
					<view class="tipsTxt" v-else-if="appopintmentInfo.visitedUserCount >= appopintmentInfo.minPersonCount" style="font-size:15px;">
						备注：该教室室仅供{{appopintmentInfo.minPersonCount}}—{{appopintmentInfo.maxPersonCount}}人的团队使用，目前已达到人数下限。
										<!-- 已满足最低{{appopintmentInfo.minPersonCount}}人要求,已邀请{{appopintmentInfo.visitedUserCount-1}}人,还可邀请{{appopintmentInfo.maxPersonCount-appopintmentInfo.visitedUserCount}}人 -->
					</view>
					<view class="tipsTxt" v-if="appopintmentInfo.isOut==1">
					 您已签退！
					 </view>
				</view>
				<!-- 不是共享空间并且是位置预约 -->
				<view class="tipsTxtBox" v-if="appopintmentInfo.isShare == 0 && appopintmentInfo.isPositionAppointment == 1">
					<view class="tipsTxt" v-if="appopintmentInfo.shareOrderCount < appopintmentInfo.minPersonCount">
						已邀请{{appopintmentInfo.shareOrderCount}}人
					</view>
				</view>
				<!-- 整间预约的一直显示，共享的要判断数量  位置的没有邀请按钮 -->
				<!-- <block v-if="appopintmentInfo.isShare == 1">
					<view class="appointmentInfoBtn" v-if="appopintmentInfo.shareOrderCount >= appopintmentInfo.maxPersonCount || appopintmentInfo.orderState == 70" style="background: #bcbcbc">邀请学员</view>
					<view class="appointmentInfoBtn" v-else @click="jumpPage()">邀请学员</view>
				</block>
				<block v-else>
					<view class="appointmentInfoBtn" v-if="appopintmentInfo.orderState == 70" style="background: #bcbcbc">邀请学员</view>
					<view class="appointmentInfoBtn" v-else @click="jumpPage()">邀请学员</view>
				</block> -->
			</view>
		</block>
		
		
		
		
		
		
		<view class="submitBtnBox">
			<!-- 2.在订单详情页面如果订单状态是 20（使用中）且当前人已签到 isSigned=1 则 签退 按钮 -->
			<view class="submitBtn" style="width:45%;font-size: 28rpx;" v-if="appopintmentInfo.orderState == 20 && appopintmentInfo.isSigned == 1 && appopintmentInfo.isOut == 0" @click="signOut()">签退</view>
			<!-- 未签到的订单显示  取消按钮 -->
			<view class="submitBtn" style="width:45%;font-size: 28rpx;"  v-else-if=" (appopintmentInfo.orderState == 10||appopintmentInfo.orderState == 0 )&& appopintmentInfo.isSigned != 1" @click="cancleOrder()">取消预约</view>
	
	       <view class="appointmentInfoBtn"  style="font-size: 28rpx;" @click="goMine()" >个人中心</view>
	
			
		<!-- 	<view class="appointmentInfoBtn"   v-if="appopintmentInfo.orderState == 70" style="margin-left: 40%;background: #bcbcbc">扫码开门</view>
			<view class="appointmentInfoBtn"  v-if="(appopintmentInfo.orderState == 10|| appopintmentInfo.orderState == 20)&& appopintmentInfo.isOut == 0"  @click="scanOpenDoor()" style="margin-left: 40%;">扫码开门</view>
	 -->
	
		</view>
	</view>
</template>

<script>
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue";
	export default {
		components: {
			tkiQrcode,
		},
		data() {
			return {
				modal_qr: false,
				orderId: '',
				week: '',
				appopintmentInfo: {},
				showScanCode: false,
				scanCodeImg:'',
				//下面是开门二维码用到的参数
				qrCode:"",
				val: '',
				size: 200,
				iconsize: 30,
				lv: 3,
				onval: true,
				unit: 'rpx',
				loadMake: true,
				showLoading: true,
				loadingText: '二维码生成中',
				searchTimer: null ,//轮询
				
				//下面是分享二维码用到的参数
				qrCodeInv:"",
				valInv:"",
				currDate: '',
				classroomInfo: {},
								currYear: '',
								week: 0,
								weeks: [],
			}
		},
		onLoad(options) {
			this.orderId = options.orderId;
		},
		onShow() {
			this.searchInfo();
		},
		methods: {
			jumpInfoPage() {
				let date = this.appopintmentInfo.appointmentDate;
				let laboratoryId = this.appopintmentInfo.laboratoryId;
				uni.navigateTo({
					url: '/pages/classroomInfo/classroomInfo?laboratoryId='+laboratoryId+'&date='+date
				});
			},
			jumpPage() {
				let _this = this;
				let isZj = _this.appopintmentInfo.isShare == 1 ? 1 : 2;
				/* uni.navigateTo({
					url: '/pages/invitation/invitation?shareCode='+_this.appopintmentInfo.shareCode+'&roomLocation='
						+_this.appopintmentInfo.laboratoryName+'&appointmentDate='+_this.appopintmentInfo.appointmentDate
						+'&isZj='+isZj+'&startTime='+_this.appopintmentInfo.startTime+'&endTime='+_this.appopintmentInfo.endTime
						+'&orderId='+_this.orderId
				}); */
				uni.navigateTo({
					url: '/pages/invitation/invitation?orderId='+_this.orderId
				});
			},
			goMine(){
			 
				uni.switchTab({
				    url: '/pages/mine/mine'
				});
				
				},
			
			searchInfo() {
				let _this = this;
				this.$utils.requestFun('/stadium/laboratoryOrder/api/getLaboratoryOrderDetail?route=curriculum',{
					token: getApp().globalData.token,
					appId: getApp().globalData.appid,
					orderId: _this.orderId 
				},'GET').then(res=> {
					_this.appopintmentInfo = res.data.data;
					_this.classroomInfo = res.data.data;
					console.log("isVisited:",_this.appopintmentInfo.isVisited);
					_this.valInv = getApp().globalData.serverUrl + '/yuyueH5/index.html#/pages/classroom/classroom?orderId='+_this.orderId;	
					let weekIdx = new Date(res.data.data.appointmentDate).getDay();
					this.week = "周" + "日一二三四五六".charAt(weekIdx);
				});
			},
			//扫码开门
			scanOpenDoor(flag='') {
				let _this = this;
				this.$utils.requestFun('/security/DW200Api/api/getDw20OpenCodeByOrderId',{
					token: getApp().globalData.token,
					appId: getApp().globalData.appid,
					orderId: _this.orderId 
				},'GET').then(res=> {
					if(res.data.data && res.data.data != '') {
						//跳转到另外一个页面去呈现开门二维码
						 uni.navigateTo({
						 	url: '/pages/openDoor/openDoor?orderId='+_this.orderId
						 });
					}
				});
			},
			//扫码开门
			// scanOpenDoor(flag='') {
			// 	let _this = this;
			// 	this.$utils.requestFun('/security/DW200Api/api/getDw20OpenCodeByOrderId',{
			// 		token: getApp().globalData.token,
			// 		appId: getApp().globalData.appid,
			// 		orderId: _this.orderId 
			// 	},'GET').then(res=> {
			// 		if(res.data.data && res.data.data != '') {
			// 			_this.showScanCode = true;
			// 			_this.scanCodeImg = res.data.data;
			// 			_this.val = res.data.data;
			// 			// #ifdef H5
			// 			if(flag == '') {
			// 				this.scanOpenDoor(1);//H5情况下要点两次才能出来二维码，很奇怪，所以多调用一次
			// 			}else {
			// 				_this.invertalSearch();
			// 			}
			// 			// #endif	
						
			// 			// #ifdef MP-WEIXIN
			// 				_this.invertalSearch();	
			// 			// #endif
			// 		}
			// 	});
			// },
			searchState() {
				let _this = this;
				uni.request({
					url: getApp().globalData.serverUrl+'/stadium/laboratoryOrder/api/checkDoorOpenCode?route=curriculum',
					data: {
						token: getApp().globalData.token,
						code: _this.scanCodeImg 
					},
					method: 'GET',
					success(res){
						if(res.data.msg && res.data.msg != '') {
							clearInterval(_this.searchTimer);
							_this.searchTimer = null;
							uni.showModal({
							    title: '提示',
							    content: res.data.msg,
								showCancel: false,
							    success: function (res) {
							        if (res.confirm) {
							            console.log('用户点击确定');
							        }
							    }
							});
						}
					}
				});
			},
			//轮询查询二维码是否打开
			invertalSearch() {
				let _this = this; 
				this.searchTimer = setInterval(()=> {
					_this.searchState();
				},1000)
			},
			//签退
			signOut() {
				
				let _this = this;
				uni.showModal({
								    title: '提示',
								    content: _this.appopintmentInfo.signOutMsg?_this.appopintmentInfo.signOutMsg:"确认签退？",
								    success: function (res1) {
								        if (res1.confirm) {
								
				
				_this.$utils.requestFun('/stadium/laboratoryOrder/api/memberDoSignOut?route=curriculum',{
					token: getApp().globalData.token,
					appId: getApp().globalData.appid,
					orderId: _this.orderId 
				},'GET').then(res=> {
					console.log(res);
					uni.showToast({
						title: '您已成功签退，欢迎下次预约！',
						success() {
							setTimeout(()=> {
								uni.navigateBack({
								    delta: 1
								});
							},1000)
						}
					})
				});
				
				
				
				        } else if (res1.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
				
				
			},
			//取消订单
			cancleOrder(data) {
				let _this = this;
				uni.showModal({
				    title: '提示',
				    content: '是否确认取消订单？',
				    success: function (res) {
				        if (res.confirm) {
							
							let cancelUrl='/stadium/laboratoryOrder/api/memberCancelLaboratoryOrder?route=curriculum';
							if(_this.appopintmentInfo.isVisited==1){
								cancelUrl="/stadium/laboratoryOrder/api/memberCancelVisitedOrder?route=curriculum";
							}
							
							_this.$utils.requestFun(cancelUrl,{
								token: getApp().globalData.token,
								appId: getApp().globalData.appid,
								orderId: _this.orderId
							},'GET').then(res=> {
								console.log(res);
								uni.showToast({
									title: '取消成功！',
									success() {
										setTimeout(()=> {
											uni.navigateBack({
											    delta: 1
											});
										},1000)
									}
								})
							});
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			}
		},
		onHide: function() {
			if(this.searchTimer) {
				clearInterval(this.searchTimer);
				this.searchTimer = null;
			}
		},
		onUnload: function() {
			if(this.searchTimer) {
				clearInterval(this.searchTimer);
				this.searchTimer = null;
			}
		},
		destroyed: function() {
			if(this.searchTimer) {
				clearInterval(this.searchTimer);
				this.searchTimer = null;
			}
		}
	}
</script>


<style lang='scss' scoped>
	
	.class-table {
	    .table-wrapper {
	        width: 100%;
	        height: 100%;
	        overflow: auto;
	    }
	
	    .tabel-container {
	        /* margin: 7px; */
	
	        table {
	            table-layout: fixed;
	            width: 100%;
	            thead {
	                // background-color: #409EFF;
	                background-color: #18CCA7;
	
	                th {
	                    color: #fff;
	                    line-height: 17px;
	                    font-weight: normal;
	                }
	            }
	
	            tbody {
	                background-color: #f4f4f5;
	
	                // background-color: #fff;
	                td {
	                    // color: #677998;
	                    color: #333;
	                    line-height: 12px;
	                }
	            }
	
	            th {
	                width: 60px;
	                padding: 0px 2px;
	                font-size: 12px;
	                text-align: center;
	            }
	
	            td {
	                width: 60px;
	                /* padding: 5px 2px; */
	                font-size: 12px;
	                text-align: center;
	            }
	
	            tr td:first-child {
	                color: #333;
	
	                .period {
	                    font-size: 8px;
	                }
	            }
				 th:first-child {
				  position:sticky;
				  left:2px;
				  z-index:2;
				  background-color: #18CCA7;
				}
				td:first-child {
				  position:sticky;
				  left:2px;
				  z-index:2;
				  background-color: #f4f4f5;
				  border-right-color:#aaa;
				}
	        }
	    }
	}
		
</style>

<style>
	/* 变为： 可选 灰，已约 橙，开放： #70CC33，已选： #2BD56F #19AD78 */
	.tipsGreen {
		background: #19AD78;
	}
	
	.tipsOrange {
		background: #FF7633;
	}
	
	.tipsHui {
		background: #EBEBEB;
	}
	
	.tipsOpen {
		background: #70CC33;
	}
	.appointmentInfoContainer {
		width: 100%;
		height: 100%;
		padding-bottom: 140rpx;
		background: #FFFFFF;
	}
	.txtOverFlow {
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.flex {
		display: flex;
	}
	.classRoomImg {
		width: 140rpx;
		height: 140rpx;
		margin: 30rpx 14rpx 0 34rpx;
	}
	.appointmentInfoHead {
		width: 100%;
		/* height: 200rpx; */
		background-image: url("https://t.acoer.cn/guoshiBgImg/appointmentInfoBg.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.appointmentInfoHeadBox {
		width: 69%;
	}
	.appointmentInfoHead-title {
		font-size: 34rpx;
		color: #222222;
		line-height: 58rpx;
		margin-top: 24rpx;
		font-weight: bold;
		margin-bottom: 12rpx;
	}
	.appointmentInfoHead-subTxt {
		font-size: 24rpx;
		color: #999999;
		line-height: 40rpx;
	}
	.ftc6 {
		font-size: #666666;
		margin-left: 15rpx;
	}
	.moreIconHui {
		width: 27rpx;
		height: 27rpx;
		margin-top: 90rpx;
	}
	.appointmentInfoBox2 {
		width: 100%;
		min-height: 200rpx;
		display: flow-root;
		padding-bottom: 20rpx;
		background-color: #F6F7F9;
		border-radius: 20rpx 20rpx 0px 0px;
	}
	.appointmentInfoItem {
		width: 90%;
		line-height: 60rpx;
		font-size: 30rpx;
		color: #222222;
		padding: 0 45rpx;
		margin-bottom: 10rpx;
		padding-top: 20rpx;
		clear: both;
	}
	.appointmentInfoLabel {
		width: 40%;
		text-align: left;
	}
	.appointmentInfoLabel2 {
		width: 22%;
		text-align: left;
	}
	.tipsTxtBox {
		width: 100%;
	}
	.tipsTxt {
		width: 100%;
		color: #666;
		font-size: 24rpx;
		text-align: center;
	}
	.appointmentInfoTxt {
		width: 60%;
		text-align: right;
	}
/* 	.appointmentInfoBtn {
		width: 140rpx;
		height: 60rpx;
		background: linear-gradient(90deg, #19AD78, #1EBE85);
		border-radius: 30rpx;
		text-align: center;
		font-size: 26rpx;
		color: #FFFFFF;
	} */
	
	.appointmentInfoBtn {
	width: 45%;
	height: 77rpx;
	background: linear-gradient(90deg, #19AD78, #1EBE85);
	border-radius: 35rpx;
	line-height: 77rpx;
	display: block;
	margin: 0 auto;
	font-size: 32rpx;
	color: #FFFFFF;
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	text-align: center;
	}
	
	
	.appointmentInfoBox3 {
		width: 100%;
		clear: both;
	}
	.appointmentInfoSubTxt {
		margin-top: 32rpx;
		text-align: center;
		font-size: 30rpx;
		color: #666666;
	}
	.appointmentInfoState {
		width: 170rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: #FFEEE7;
		border-radius: 4rpx;
		font-size: 30rpx;
		color: #FF072A;
		text-align: center;
		display: block;
		margin: 0 auto;
		margin-top: 46rpx;
		margin-bottom: 36rpx;
	}
	.appointmentInfoNum {
		font-size: 32rpx;
		color: #222222;
		text-align: center;
		margin-bottom: 36rpx;
	}
	.scanImg {
		width: 380rpx;
		height: 380rpx;
		display: block;
		margin: 0 auto;
		margin-top: 20rpx;
	}
	.timeListItem {
		min-width: 198rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: #F9FFFD;
		border: 2px solid #19AD78;
		border-radius: 10rpx;
		margin-left: 34rpx;
		float: left;
		margin-bottom: 20rpx;
		font-size: 26rpx;
		color: #19AD78;
		text-align: center;
	}
	.stationItem {
		min-width: 198rpx;
		height: 90rpx;
		line-height: 42rpx;
		background: #F9FFFD;
		border: 2px solid #19AD78;
		border-radius: 10rpx;
		margin-left: 34rpx;
		float: left;
		margin-bottom: 20rpx;
		font-size: 26rpx;
		color: #19AD78;
		text-align: center;
	}
	.qrImg {
		margin-top: 20rpx;
	}
/* 	
原来的样式
.submitBtnBox {
		width: 100%;
		background-color: #FFFFFF;
		height: 140rpx;
		position: fixed;
		bottom: -1px;
	}
	 */
	.submitBtnBox {
		width: 95%;
		background-color: #FFFFFF;
		height: 140rpx;
		margin: 50px auto;
		
		display: flex;
	}
	.submitBtn {
		width: 45%;
		height: 77rpx;
		background: linear-gradient(90deg, #19AD78, #1EBE85);
		border-radius: 35rpx;
		line-height: 77rpx;
		display: block;
		margin: 0 auto;
		font-size: 32rpx;
		color: #FFFFFF;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		text-align: center;
	}
	
	.main {
		width: 100%;
		box-sizing: border-box;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #DDDDDD;
		padding-bottom: 36rpx;
		background-color: white;
	}
	
	.mainL {
		margin-top: 25rpx;
		width: 90rpx;
	
	}
	
	.mainL-li {
		margin-top: 20rpx;
		padding-left: 5rpx;
		padding-right: 5rpx;
		font-weight: bold;
		color: #666666;
		text-align: center;
		width: 100rpx;
		height: 60rpx;
		border-right: 1rpx solid #fff;
		border-bottom: 1rpx solid #fff;
		line-height: 60rpx;
		display: inline-block;
		font-size: 28rpx;
	}
	
	
	.mainRUl {
		margin-left: 20rpx
	}
	
	.mainRUl-li {
		/* margin-top: 20rpx; */
		/* width: 80rpx; */
		height: 60rpx;
		border-radius: 5px;
		border-bottom: 1rpx solid #fff;
		border-right: 2rpx solid #fff;
	}
	
	.mainRUl-li.mainRUl-li-spel {
		font-size: 26rpx;
		line-height: 60rpx;
		color: #666;
		font-weight: 700;
	}
	
	.disflex-flexgrow-1 {
		-webkit-box-flex: 1;
		-moz-flex-grow: 1;
		-webkit-flex-grow: 1;
		flex: 1;
		min-width: 0;
	}
	
	.flex_j {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		flex-wrap: wrap;
	}
	
	/*水平排列*/
	.flexH {
		-webkit-box-orient: horizontal;
		-webkit-flex-direction: row;
		-moz-flex-direction: row;
		-ms-flex-direction: row;
		-o-flex-direction: row;
		flex-direction: row;
	}
	
	.flexV {
		-webkit-box-orient: vertical;
		-webkit-flex-direction: column;
		-moz-flex-direction: column;
		-ms-flex-direction: column;
		-o-flex-direction: column;
		flex-direction: column;
	}
	
	.alignC {
		align-items: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-moz-align-items: center;
		-ms-align-items: center;
		-o-align-items: center;
	}
	
	.flexC {
		-webkit-box-pack: center;
		justify-content: center;
		-webkit-justify-content: center;
		-moz-justify-content: center;
		-ms-justify-content: center;
		-o-justify-content: center;
	}
	
	.flexSb {
		justify-content: space-between;
		-webkit-justify-content: space-between;
		-moz-justify-content: space-between;
		-ms-justify-content: space-between;
		-o-justify-content: space-between;
	}
	.tipsBox {
		width: 100%;
		background: #FFFFFF;
		height: 80rpx;
		line-height: 80rpx;
	}
	
	/* .tipsTxt {
		width: 200rpx;
		font-size: 28rpx;
		color: #222222;
		text-align: center;
	} */
	
	.tipsItem {
		width: 23%;
		text-align: left;
		font-size: 28rpx;
		color: #222222;
	}
	
	.tipsColor {
		width: 36rpx;
		height: 36rpx;
		border-radius: 6rpx;
		margin-top: 24rpx;
		margin-right: 14rpx;
	}
	
	/* 变为： 可选 灰，已约 橙，开放： #70CC33，已选： #2BD56F #19AD78 */
	.tipsGreen {
		background: #19AD78;
	}
	
	.tipsOrange {
		background: #FF7633;
	}
	
	.tipsHui {
		background: #EBEBEB;
	}
	
	.tipsOpen {
		background: #70CC33;
	}
	

</style>
